<template>
  <div style="height: 100%">
  </div>
</template>

<script>
import Format from '@/utils/format'
import EchartsMixins from '../echarts.mixins'

export default {
  mixins: [EchartsMixins],
  data() {
    return {
      textColor: '#00e6ff',
      charts: '',
      xList: [],
      yList: [],
      zList: [],
      xyList: [],
      xyzList: [],
      // 监测点名称
      monitorName: '',
    }
  },
  computed: {
    options() {
      const Echarts = require('echarts')
      return {
        animationDuration: 2000, // 动画时长 可以接受 回调函数
        title: {
          text: this.monitorName + '监测点位移变化曲线图',
          x: 'center',
          align: 'right',
          textStyle: {
            color: this.textColor
          }
        },
        grid: {
          left: 40,
          right: 20,
          bottom: 20,
          // 区域是否包含坐标轴的刻度标签
          containLabel: false
        },
        legend: {
          data: ['X', 'Y', 'Z', 'XY', 'XYZ'],
          y: 'top',
          x: 'right',
          padding: [30, 5, 0, 0],
          // 设置为可滚动的图例
          type: 'scroll',
          textStyle: {
            color: this.textColor
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',

            label: {
              backgroundColor: '#505765'
            }
          },
          formatter: (params, ticket, callback) => {
            var contentArr = []
            for (var i = 0; i < params.length; i++) {
              var data = params[i]
              if (i === 0) {
                contentArr.push(Format(new Date(data.value[0])))
              }
              contentArr.push(data.marker + data.seriesName + '位移值：' + data.value[1] + 'mm')
            }
            let remark = params[0]?.data?.remark || ''
            remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
            return contentArr.join('<br/>')
          },

        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisLabel: { // 坐标轴标签样式设置
            formatter: function (value, index) { // 坐标轴文字展示样式处理
              const date = new Date(value)
              if (date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0) {
                return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
              }
              return Echarts.format.formatTime('hh:mm:ss', new Date(value))
            },
            show: true,
            textStyle: {
              color: this.textColor
            },
          },
          nameTextStyle: {
            color: this.textColor
          },
          axisLine: {
            lineStyle: {
              color: this.textColor
            }
          }
        },
        yAxis: {
          name: '位移值(mm)',
          type: 'value',
          nameTextStyle: {
            color: this.textColor
          },
          axisLine: {
            lineStyle: {
              color: this.textColor
            }
          }
        },
        series: [
          {
            name: 'X',
            type: 'line',

            smooth: true,
            symbol: 'none',
            symbolSize: 4,
            data: this.xList,
          },
          {
            name: 'Y',
            type: 'line',

            smooth: true,
            symbol: 'none',
            symbolSize: 4,
            data: this.yList,
          },
          {
            name: 'Z',
            type: 'line',

            smooth: true,
            symbol: 'none',
            symbolSize: 4,
            data: this.zList,
          },
          {
            name: 'XY',
            type: 'line',

            smooth: true,
            symbol: 'none',
            symbolSize: 4,
            data: this.xyList,
          },
          {
            name: 'XYZ',
            type: 'line',

            smooth: true,
            symbol: 'none',
            symbolSize: 4,
            data: this.xyzList,
          }
        ]
      }
    }
  },

  methods: {
    updateEchart(data, monitorName) {
      this.charts.clear();
      this.charts.resize()
      this.monitorName = monitorName
      this.xList = data.xDisplacement;
      this.yList = data.yDisplacement;
      this.zList = data.zDisplacement;
      this.xyList = data.xyDisplacement;
      this.xyzList = data.xyzDisplacement;
      this.charts.setOption(this.options)
    },
  },
}
</script>
